<template id="loading-template">
    <div class="loading" :style="customClass">
        <div>
            <div class="c1"></div>
            <div class="c2"></div>
            <div class="c3"></div>
            <div class="c4"></div>
        </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters} from 'vuex';
  import { Message} from 'element-ui'
  import { LOADING } from '../store/mutation-types/loading/index.js'
    export default {
        data:function () {
            return {
                time1:'',
            }
        },
        props : {
            customClass : {
                default: ''
            }
        },
        computed : {
            ...mapGetters({
                    'loading' : 'getLoading',
                })
        },
        methods: {
            changeLoading() {
                if (this.loading) {
                    // this.time1 = setTimeout(()=>{
                    //     Message({
                    //       duration: 3000,
                    //       message: '请求超时',
                    //       type: 'error',
                    //     })
                    //     this.$store.commit(LOADING, { loading: false});
                    // },30000)
                }else {
                    clearTimeout(this.time1)
                }
            }
        },
        watch: {
            loading() {
                this.changeLoading()
            }
        }
    }

</script>

<style scoped lang="scss">
    @keyframes rotate {
        from{transform:rotate(0deg)}
        to{transform:rotate(360deg)}
    }


    .loading {
        display:inline-block;
        transform:scale(.5);
        position:fixed;
        left:50%;
        top:50%;
        z-index:10000;
    }

    .loading > div {
        width: 60px;
        height: 60px;
        position: absolute;
        left: 50%;
        margin-left: -30px;
        top: 50%;
        margin-top: -30px;
    }

    .loading > div > div {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background: #0686f9;
        top: 10px;
        left: 10px;
        transform-origin: 20px 20px;
        border-radius: 8px;
        animation: spin-a 1s infinite cubic-bezier(0.5, 0, 0.5, 1);
    }

    .loading > div > .c2 {
        top: 10px;
        left: auto;
        right: 10px;
        transform-origin: -4px 20px;
        animation: spin-b 1s infinite cubic-bezier(0.5, 0, 0.5, 1);
    }
    .loading > div > .c3 {
        top: auto;
        left: auto;
        right: 10px;
        bottom: 10px;
        transform-origin: -4px -4px;
        animation: spin-c 1s infinite cubic-bezier(0.5, 0, 0.5, 1);
    }
    .loading > div > .c4 {
        top: auto;
        bottom: 10px;
        transform-origin: 20px -4px;
        animation: spin-d 1s infinite cubic-bezier(0.5, 0, 0.5, 1);
    }

    @keyframes spin-a {
        0%   { transform: rotate(90deg); }
        0%  { transform: rotate(90deg); }
        50%  { transform: rotate(180deg); }
        75%  { transform: rotate(270deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spin-b {
        0%   { transform: rotate(90deg); }
        25%  { transform: rotate(90deg); }
        25%  { transform: rotate(180deg); }
        75%  { transform: rotate(270deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spin-c {
        0%   { transform: rotate(90deg); }
        25%  { transform: rotate(90deg); }
        50%  { transform: rotate(180deg); }
        50%  { transform: rotate(270deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spin-d {
        0%   { transform: rotate(90deg); }
        25%  { transform: rotate(90deg); }
        50%  { transform: rotate(180deg); }
        75%  { transform: rotate(270deg); }
        75% { transform: rotate(360deg); }
        100% { transform: rotate(360deg); }
    }


    .loading > span {
        width: 100px;
        height: 30px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: 30px;
        color: #23ccfd;
        font-size: 12px;
        text-align: center;
    }
</style>
